<template>
  <div class="main-layout-container">
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside width="200px" class="layou-aside">
        <aside-bar></aside-bar>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header class="layout-header">
          <header></header>
        </el-header>
        <!-- 主体内容区域 -->
        <el-main class="layout-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import Header from "./components/header.vue";
import AsideBar from "./components/aside-bar.vue";

import useCounterStore from "../../store/index";

const store = useCounterStore();

const centerDialogVisible = ref(false);
</script>

<style lang="less" scoped>
.main-layout-container {
  height: 100vh;
  overflow: hidden;
  background-color: #1E2532;
  .layou-aside {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #232C3D;
  }
  .layout-header {
    height: 50px;
    box-sizing: border-box;
    background-color: #232C3D;
  }
  .layout-main {
    height: calc(100vh - 60px);
  }
  .el-main {
    padding: 0;
  }
}
</style>